<template>
    <div class="container">
        <Navbar title="充值" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>
        <!-- <van-notice-bar left-icon="volume-o" text="充值和兑换的数值都只能是整数~" /> -->
        <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                <van-swipe-item>充值和兑换的数值都只能是整数</van-swipe-item>
                <van-swipe-item>现金与积分兑换比例为 1 比 100</van-swipe-item>
                <van-swipe-item>只能现金兑换积分</van-swipe-item>
            </van-swipe>
        </van-notice-bar>

        <div class="pay_nums">
            <div class="left">
                <div class="top">
                    <van-icon name="smile-o" /> 积分
                </div>
                <span class="nums">
                    <van-icon name="gem-o" /> {{ point }}
                </span>
            </div>
            <div class="left">
                <div class="top">
                    <van-icon name="pending-payment" /> 钱包
                </div>
                <span class="nums">
                    <van-icon name="gold-coin-o" /> {{ cash }}
                </span>
            </div>
        </div>

        <div class="ma">
            <van-button type="primary" block round icon="refund-o" style="margin-bottom: 10px;"
                color="linear-gradient( 135deg, #6B73FF 10%, #000DFF 100%)" @click="handle(tList[0])">现金充值</van-button>

            <van-button type="primary" block round icon="exchange"
                color="linear-gradient( 135deg, #FFA6B7 10%, #1E2AD2 100%)" @click="handle(tList[1])">
                现金转积分</van-button>
        </div>

        <van-dialog v-model:show="showInput" title="输入需要 充值/兑换 的 金额/积分" theme="round-button" show-cancel-button
            @confirm="confirm" @cancel="cancel">

            <van-field v-model="nums" clearable :label="label" :left-icon="icon" placeholder="输入需要充值/兑换的数值"
                :formatter="formatter" />

        </van-dialog>
    </div>
</template>

<script>
import Navbar from '../Navbar.vue';
export default {
    name: 'Pay',
    data() {
        return {
            showInput: false,
            nums: '',
            point: 0,
            cash: 0,
            exchange: 0,
            label: '',
            icon: '',
            name: '',
            tList: [
                {
                    name: 'cash',
                    content: '现金充值',
                    icon: 'refund-o',
                },
                {
                    name: 'exchange',
                    content: '现金转积分',
                    icon: 'exchange'
                },
            ],
            user: ''
        }
    },
    components: {
        Navbar
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        handle(item) {
            this.name = item.name
            this.label = item.content
            this.icon = item.icon
            this.showInput = true
        },
        confirm() {
            if (this.nums > this.cash) {
                this.nums = null
                this.$notify({
                    type: 'warning',
                    message: '现金不足，无法兑换积分，请重新输入',
                    duration: 1000
                })
                return false
            }

            // console.log(this.nums);
            if (this.nums > 500) {
                this.nums = null

                this.$notify({
                    type: "warning",
                    message: "充值金额过大，请重新输入",
                    duration: 1000
                })

                return false
            }

            let msg = '';
            if (this.name == 'cash') {
                msg = '正在充值中..';
            } else {
                msg = '正在兑换中..';
            }

            const data = {
                name: this.name,
                userid: this.user.id,
                nums: this.nums
            }

            this.$toast.loading({
                duration: 1000,
                forbidClick: true,
                loadingType: 'spinner',
                message: msg,
                onClose: async () => {
                    let res = await this.$api.pay(data);
                    console.log(res);
                    if (res.code === 1) {
                        this.$notify({
                            type: 'success',
                            duration: 1500,
                            message: res.msg,
                            onClose: () => {
                                this.point = res.data.point;
                                this.cash = res.data.cash;
                                return false
                            }
                        })
                    } else {
                        this.$notify({
                            type: 'danger',
                            duration: 1500,
                            message: res.msg,
                            onClose: () => {
                                return false
                            }
                        })
                    }
                }
            })

            this.nums = '';
        },
        cancel() {
            this.nums = ''
        },
        formatter(value) {
            return value.replace(/[^\d]/g, '')
        },
    },
    created() {
        this.user = this.$cookies.get('ShopUser') ? this.$cookies.get('ShopUser') : {};
        this.point = this.user.point;
        this.cash = this.user.cash;
    },
};
</script>

<style scoped>
:deep(.van-button) {
    box-shadow: 0 0 10px #ccc;
}

.pay_nums {
    /* width: 100%; */
    height: 12.5rem;
    /* padding: 20px; */
    margin: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    background-color: #0fb15d;
    border-radius: 12px;
    box-sizing: border-box;
    text-align: center;
}

.ma {
    margin: 0 20px;
}

.left .right {
    display: flex;
    flex-direction: column;
}

.top {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.nums {
    font-size: 1rem;
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
}
</style>